<style lang="less">
  #new-house-index {
    background: #3d3936 url(~@/assets/new-house/new_house_bg.jpg) no-repeat;
    .search {
      margin: 2em 0 0 0;
      padding-bottom: 3em;
      text-align: center;
    }
    .newHouseList {
      background: #fff;
      position: relative;
      min-height: 420px;
      .content {
        width: 1190px;
        margin: 0 auto;
        padding-bottom: 3em;
        .item-wrapper {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 0 0 3em 0;
          &:after {
            content: "";
            width: 327px;
          }
        }
      }
      .item {
        height: 325px;
        width: 370px;
        .link {
          display: block;
          position: relative;
          img {
            width: 100%;
            height: 245px;
            display: block;
            background: #fbf8a8;
          }
          .head {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            padding: .5em 1em;
            background: rgba(0, 0, 0, .5);
            display: flex;
            justify-content: space-between;
            align-items: center;
            h2 {
              font-size: 20px;
              color: #fff;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            em {
              color: #eed60c;
              white-space: nowrap;
              font-size: 18px;
              font-style: normal;
            }
          }

        }
        .application {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          line-height: normal;
          margin-top: 1em;
          .address {
            font-size: 14px;
            color: #000;
            margin-right: 1em;
            img{
              max-width: 15px;
              max-height: 15px;
              vertical-align: middle;
              margin-right: 5px;
            }
          }

          .go {
            border-radius: 5px;
            width: 120px;
            background: #0061ae;
            line-height: 35px;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
          }
        }
      }
      .pagination {
        display: flex;
        justify-content: center;
      }
    }
  }
</style>
<template>
  <div id="new-house-index">
    <Navigator></Navigator>
    <div class="search">
      <GlobalSearchInput tab="new"></GlobalSearchInput>
    </div>
    <FilterCategory :list="filters" @change="changeFilter"></FilterCategory>
    <div class="newHouseList">
      <div class="content" v-if="contentList.length<1">{{spinShow ? '加载中...' : '暂无符相关数据。'}}</div>
      <Spin size="large" fix v-if="spinShow"></Spin>
      <div class="content">
        <div class="item-wrapper">
          <div class="item" v-for="item in contentList">
            <router-link class="link" :to="{name:'newHouseDetail', params:{ id: item.houseNumber }}">
              <img v-if="item.coverPic" :src="item.coverPic | newHouseList" alt="">
              <img v-else :src="no_image" alt="">
              <div class="head">
                <h2 v-text="item.name"></h2>
                <em>{{item.unitPrice}}元/m²</em>
              </div>
            </router-link>
            <div class="application">
              <span class="address"><img src="~@/assets/second-house-icon/address.svg" alt="">{{item.houseAddress}}</span>
              <a href="javascript:void(0)" v-appointment="`${item.id},${item.category}`" class="go">立即预约</a>
            </div>
          </div>
        </div>
        <div class="pagination">
          <Page v-if="showPage"
                :total="totalCount"
                :pageSize="pageSize"
                :current="currentPage"
                @on-change="changePagination"></Page>
        </div>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>

  import api from '@/service/api'
  export default {
    components: {
      Navigator: require('@/components/Navigator.vue'),
      FilterCategory: require('@/components/FilterCategory.vue'),
      PageFooter: require('@/components/PageFooter/index.vue')
    },
    data () {
      return {
        keywords: '',
        params: {},
        spinShow: false,
        contentList: [],
        filters: require('./filter.config').default,
        totalCount: 0,
        currentPage: 1,
        pageSize: 12,
        showPage: false,
        no_image:'http://jyhimg.cdjyh.com/no_image.png?imageMogr2/auto-orient/thumbnail/!370x245r/gravity/Center/crop/370x245/blur/1x0/quality/75|watermark/2/text/5oiQ6YO95ZCJ5YWD5rGH/font/5qW35L2T/fontsize/240/fill/I0ZBRjRGNA==/dissolve/100/gravity/NorthWest/dx/10/dy/10|imageslim'
      }
    },
    methods: {
      changeFilter (params) {
        this.params = params
        this.search()
      },
      changePagination (num) {
        this.currentPage = num
        this.search()
      },
      search () {
        this.spinShow = true
        this.contentList = []
        // 如果搜索条件为空，则显示推荐数据，需要显示分页
        this.showPage = this.searchParamsIsEmpty
        if (this.searchParamsIsEmpty) {
          api.newHouseList('kNEW_OPEN_REAL_ESTATE', this.currentPage).then((res) => {
            this.spinShow = false
            this.totalCount = res.data.totalPage * 12
            this.contentList = res.data.content
            setTimeout(() => {
              document.body.scrollTop = 0
            }, 0)
          }).catch(() => {
            this.spinShow = false
          })
        } else {
          // 否则调用另外一个借口
          api.newHouseSearch(this.params).then((res) => {
            this.spinShow = false
            this.contentList = res.data.content
          }).catch(() => {
            this.spinShow = false
          })
        }
      }
    },
    computed: {
      // 返回布尔值，判断是否搜索参数是否均为空
      searchParamsIsEmpty () {
        return Object.keys(this.params).every((key) => {
          return this.params[key] === ''
        })
      }
    },
    mounted () {
      this.search()
    }
  }
</script>

